<template>
  <div class="m-top-header">
    <!-- 头部导航 -->
    <div class="app-container m-header-container">
        <div class="m-logo clearfix">
            <div class="logo lr">
                <img src="../../assets/quzhoudailogo.png" alt="">    
            </div>
            <p class="fr">投融网后台管理系统</p>   
        </div>
      
      
        <div class="m-header">
        <!-- 用户登录信息 -->
            <div class="header-user">
                <span>您好！</span>
                <span>{{userName}}</span>
                <span class="user-options" @click="clearUSerInfo">退出</span>
                <span class="cur" @click="onJump">理财达人</span>
            </div>
       </div>
    </div>
  </div>
</template>

<script>
import { FONT_MALL_URL } from 'js/const'
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { session } from 'js/util'

export default {
  data() {
    return {
      userName: this.$store.getters.userName,
    //   userName :'投融宝',
      curNav: this.$route.query.cIndex || 0 // 默认当前处于第一个导航
    }
  },
  computed: {
    
  },
//   created() {
//     this.fetchMenuList(this.$store.getters.token)
//   },
  methods: {
    ...mapMutations(['clearUserInfo']),
    ...mapActions(['fetchMenuList', 'addBreads', 'setBreads']),
    
    /**
     * 退出登录
     */
    clearUSerInfo() {
      this.clearUserInfo()
    },
    /**
     * 跳转好下单前台首页
     */
    onJump() {
      window.open(`${FONT_MALL_URL}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.cur {
  cursor: pointer;
}
.m-top-header {
  width: 100%;
  min-width: 1380px;
  height: 100px;
  background-color: #000;
  color: #ffffff;
  margin-bottom: 20px;
}
.m-header-container {
  position: relative;
  height: inherit;
  .m-logo{
    width:415px;
    .logo {
        width: 79px;
        height: 79px;
        display: inline-block;
        margin-top: 11px;
    }
    p{
        width:328px;
        height:50px;
        font-size:36px;
        font-family:PingFangSC-Semibold;
        font-weight:600;
        color:rgba(237,25,33,1);
        line-height:50px;
        margin-top: 25px;
    }
  }
  
}
.m-header {
  position: absolute;
  right: 254px;
  bottom : 0;
  height: 20px;
  bottom: 0;
  width: 1200px;
  .header-list {
    display: inline-block;
    font-size: 16px;
    .nav {
      display: inline-block;
      margin: 0 20px;
      cursor: pointer;
    }
    .actived {
      padding: 5px 10px;
      background:#ffffff;
      color: $color-main;
      font-weight: bold;
    }
  }
  .header-user {
    position: absolute;
    right: 0;
    width: 30%;
    display: inline-block;
    // margin-left: 100px;
    vertical-align: bottom;
    bottom: 0;
    padding: 5px 0 21px 10px;
    text-align: right;
    .user-options {
      cursor: pointer;
      &:before, &:after {
        content: '|';
        color: #727171;
        padding: 0 10px;
      }
    }
  }
}
</style>
